<template>
  <view class="allcontent">
    <!-- 积分商城 -->
      <view class="score-shop-box">
        <view class="shop-list">
          <view class="item-shop-label" v-for="(item,index) in scoreList" :key="index" @click="$Router.push({ path: '/pages/user/vip/vip-exchangeDetail', query: { id: item.id, type: 'score' } })" :style="index%2!=0?'margin-right:0':''">
            <view class="shop-img"><image :src="item.image"></image></view>
            <view class="shop-content">
              <view class="shop-label-name">{{ item.title }}</view>
              <view class="shop-label-money">{{ item.price }}</view>
              <view class="shop-btn" @click.stop="exchange(item)">立即兑换</view>
            </view>
          </view>
        </view>
      </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      textContent: '',
      scoreList: [],
      currentPage: 1,
      lastPage: 1
    }
  },
  onLoad() {
    this.initTextInfo()

    this.getScoreShopsList();
    // 触底监听
    uni.$on('uOnReachBottom', () => {
      if (this.currentPage < this.lastPage) {
        this.currentPage += 1;
        this.getScoreShopsList();
      }
    });
  },
  methods: {
    initTextInfo() {
      this.$https('vip.getXieInfo', {
        type: 1,
      }).then(res => {
        if (res.code) {
          this.textContent = res.data
        }
      })
    },

    //积分商品列表
    getScoreShopsList() {
      let that = this;
      that.loadStatus = 'loading';
      that.$http('goods.scoreList', {
        page: that.currentPage
      }).then(res => {
        if (res.code == 1) {
          that.scoreList = [...that.scoreList, ...res.data.data];
          that.lastPage = res.data.last_page;
        }
      });
    },

    // 兑换商品
    exchange(item) {
      let user = uni.getStorageSync('userInfo');
      let { score } = item.score_goods_sku_price[0]
      if (user.score < score) return uni.showToast({title: '抱歉，积分不够兑换', icon: 'none'})
      this.$Router.push({ path: '/pages/user/vip/vip-exchangeDetail', query: { id: item.id, type: 'score' } })
    }
  }
}
</script>

<style scoped lang="scss">
.score-shop-box {
  padding: 20rpx 24rpx;
  .score-title {
    font-size: 28rpx;
    color: #333333;
    font-weight: bold;
    margin-bottom: 30rpx;
  }
  .shop-list {
    display: flex;
    flex-wrap: wrap;
    .item-shop-label {
      width: 48%;
      background-color: white;
      border-radius: 16rpx;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      .shop-img {
        width: 100%;
        height: 240rpx;
        border-radius: 16rpx;
        image {
          width: 100%;
          height: 100%
        }
      }
      .shop-content {
        padding: 20rpx 20rpx 30rpx;
        .shop-label-name {
          font-size: 32rpx;
          color: #333333;
          font-weight: bold;
          line-height: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .shop-label-money {
          font-size: 28rpx;
          color: #FE7F1A;
          font-weight: bold;
          margin: 15rpx 0;
        }
        .shop-btn {
          width: 100%;
          height: 68rpx;
          background: rgba(252, 83, 81, 0.14);
          border-radius: 8rpx;
          font-size: 28rpx;
          color: #FC5351;
          font-weight: 500;
          text-align: center;
          line-height: 68rpx;
        }
      }
    }
  }
}
</style>
